<template>
	<el-main>
		<!-- 查询条件 -->
		<el-form :model="searchModel" ref="searchForm" label-width="80px" :inline="true" size="small">
			<el-form-item>
				<el-input placeholder="请输入角色名称" v-model="searchModel.roleName">
				</el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
				<el-button icon="el-icon-refresh-right" @click="resetValue()">重置</el-button>
				<el-button type="success" icon="el-icon-plus" @click="openAddWindow()">新增</el-button>
			</el-form-item>
		</el-form>
		<!-- 数据表格 -->
		<el-table :data="tableData" border stripe style="width: 100%; margin-bottom: 20px" >
			<el-table-column prop="id" label="角色编号"></el-table-column>
			<el-table-column prop="roleCode" label="角色编码"></el-table-column>
			<el-table-column prop="roleName" label="角色名称"></el-table-column>
			<el-table-column prop="remark" label="角色备注"></el-table-column>
			<el-table-column label="操作" width="300" align="center">
				<template slot-scope="scope">
					<el-button icon="el-icon-edit-outline" type="primary" size="small" @click="handleEdit(scope.row)">编辑
					</el-button>
					<el-button icon="el-icon-close" type="danger" size="small" @click="handleDelete(scope.row)">删除
					</el-button>
					<el-button icon="el-icon-setting" type="primary" size="small" @click="assignRole(scope.row)">分配角色
					</el-button>
				</template>
			</el-table-column>
		</el-table>		
		<!-- 分页工具栏 -->
		<el-pagination
			background
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="pageNo"
			:page-sizes="[5, 10, 15, 20, 25]"
			:page-size="5"
			layout="total, sizes, prev, pager, next, jumper"
			:total="total"
			> </el-pagination>

		<!-- 弹出框 -->
		<system-dialog 
			:title="infoDialog.title"
			:visible="infoDialog.visible"
			:width="infoDialog.width"
			:height="infoDialog.height"
			@onClose="onClose"
			@onConfirm="onConfirm"
			>
			<div slot="content">
				<el-form :model="info" ref="dialogForm" :rules="rules"
					label-width="80px" :inline="true" size="small">
					<el-form-item label="角色编码" prop="roleCode">
						<el-input v-model="info.roleCode"></el-input>
					</el-form-item>
					<el-form-item label="角色名称" prop="roleName">
						<el-input v-model="info.roleName"></el-input>
					</el-form-item>
					<el-form-item label="备注" prop="remark">
						<el-input type="textarea" :rows="5" v-model="info.remark"></el-input>
					</el-form-item>
				</el-form>
			</div>
		</system-dialog>

	</el-main>
</template>
<script>
//导入api脚本
import roleApi from "@/api/role";
//导入对话框组件
import SystemDialog from '@/components/system/SystemDialog.vue';

export default {
    name: "department",
	components:{
		SystemDialog
	},
    data() {
        return {
            searchModel: {//查询条件
                roleName: "", 
				pageNo:1,
				pageSize:5,
				userId:this.$store.getters.userId //用户ID
				
            },
            tableData: [], //表格数据列表
			tableHeight: 0, //表格高度
			pageNo: 1, //当前页码
			pageSize: 5, //每页显示数量
			total: 0, //总数量
			//弹出框相关属性
			infoDialog: {
				title: "",
				visible: false, //是否显示
				width: 560,
				height: 230,
			},
			//对象
			info: {
				id: "",
				roleCode: "1",
				roleName: "",
				remark: "",
				createUser:this.$store.getters.userId
			},
			//表单验证规则
			rules: {
				roleCode: [{ required: true, trigger: "blur", message: "请输入角色编码"}],
				roleName: [{ required: true, trigger: "blur", message: "请输入角色名称" }],
			},
		}
    },
    methods: {
        async search() {//列表
			this.searchModel.pageNo = this.pageNo;//当前页码
			this.searchModel.pageSize = this.pageSize;//每页显示数量
            //发送查询请求
            let res = await roleApi.getRoleList(this.searchModel);
            //判断是否存在数据
            if (res.success) {
                //获取数据
                this.tableData = res.data.records;
				this.total = res.data.total;
            }
        },
        resetValue() { //重置
            this.searchModel = {}; //清空数据
            this.search(); //重新调用方法
        },
		onClose() { //弹出框=》关闭窗口
			this.infoDialog.visible = false;
		},
		onConfirm() { //弹出框=》提交
			//表单验证
			this.$refs.dialogForm.validate(async (valid) => {
				//如果验证通过
				if (valid) {
					//发送查询请求
					let res =  null;
					if(this.info.id == ""){
						res = await roleApi.addRole(this.info);
					}else{
						res = await roleApi.updateRole(this.info);
					}
					console.log('22');
					//判断是否存在数据
					if (res.success) {
						//获取数据
						this.infoDialog.visible = false;
						 //调用查询部门列表方法
						 this.search();
					}
				}
			});
		},
		openAddWindow() { //添加
			//清空表单数据
			this.$resetForm("dialogForm", this.info);
			//设置窗口标题
			this.infoDialog.title = "新增角色";
			//显示添加部门窗口
			this.infoDialog.visible = true;
		},
		handleEdit(row){
			//添加表单数据
			this.dept = row;
			//设置窗口标题
			this.infoDialog.title = "编辑角色";
			//显示添加部门窗口
			this.infoDialog.visible = true;
		},
		 async handleDelete(row){
			//提示框
			let confirm =await this.$myconfirm("确定要删除该数据吗?");
			if(confirm){
				 //发送查询请求
				 let res = await roleApi.deleteById({id:row.id});
				//判断是否存在数据
				if (res.success) {
					//获取数据
					this.search();
				}
			}
		},
		/**
		* 当每页数量发生变化时触发该事件
		*/
		handleSizeChange(size) {
			this.pageSize = size; //将每页显示的数量交给成员变量
			this.search(this.pageNo, size);
		},
		/**
		* 当页码发生变化时触发该事件
		*/
		handleCurrentChange(page) {
			this.pageNo = page;
			//调用查询方法
			this.search(page, this.pageSize);
		}
    },
    //初始化时执行
    created() {
        //调用查询部门列表方法
        this.search();
    }
};

</script>
<style lang="scss" scoped></style>
